﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DragonTimer</title>
<style type="text/css">
body
{
    margin: 0px;
    width: 230px;
    height: 380px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #000;
    background-color: #fff;
	overflow: hidden;
}
a
{
	text-decoration: none;
	color: #06C;
}
a:visited
{
	color: #06C;
}
a:hover
{
	color: #09F;
}
div
{
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.tab
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    position: absolute;
    padding: 5px;
    bottom: 0px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
}
.tab.selected
{
    background-color: #fff;
    color: #000;
}
.tab-body
{
	margin-right: 5px;
    margin-left: 5px;
    display: none;
	position: relative;
}
.setting-name
{
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 3px;
    padding-top: 6px;
}
.setting-text
{
    font-size: 13px;
    padding-bottom: 3px;
    padding-top: 6px;
}
#manage-playlist
{
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
}
input,select
{
	font-size: 13px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}
#manage-playlist .darken
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: #000;
	filter: alpha(opacity=80);
	opacity: 0.8;
	z-index: 0;
}
#manage-playlist .content
{
	position: absolute;
	left: 14px;
	top: 60px;
	background-color: #fff;
	border: 1px solid #000;
	filter: alpha(opacity=95);
	opacity: 0.95;
	z-index: 1;
	width: 200px;
	padding-bottom: 10px;
}
#manage-playlist .close
{
	position: absolute;
	top: 8px;
	right: 10px;
	width: 16px;
	height: 16px;
	background: url(images/event-close.png) no-repeat;
	cursor: pointer;
	z-index: 1;
}
#manage-playlist .close:hover
{
	background: url(images/event-close-hover.png) no-repeat;
}
#manage-playlist .close:active
{
	background: url(images/event-close.png) no-repeat;
}
</style>
<script type="text/javascript" language="javascript" src="js/system.js"></script>
<script type="text/javascript" language="javascript" src="js/common.js"></script>
<script type="text/javascript" language="javascript">
var currentTab = null;

var sounds = IsWebMode() &&
{
	"88191.mp3":
	{
		name: "D1"
	},
	"106507.mp3":
	{
		name: "D2"
	},
	"416096.mp3":
	{
		name: "Horn"
	},
	"633455.mp3":
	{
		name: "Sheep"
	}
} || 
{
	"88191.wav":
	{
		name: "D1"
	},
	"106507.wav":
	{
		name: "D2"
	},
	"416096.wav":
	{
		name: "Horn"
	},
	"633455.wav":
	{
		name: "Sheep"
	}
}

// Initialize the gadget.
function init()
{
	setupTabs();
	setupSounds();
	
	System.Gadget.onSettingsClosing = SettingsClosing;
	
	var timelineOrder = System.Gadget.Settings.read("timeline-order") == 1 ? 1 : 0;
	var timelineStyle = System.Gadget.Settings.read("timeline-style") == 1 ? 1 : 0;
	var maximumTimers = System.Gadget.Settings.read("timer-count");
	var compactTimers = System.Gadget.Settings.read("compact-timers");
	
	var timerStyle = System.Gadget.Settings.read("timer-style");
	if (timerStyle === "" || !(timerStyle >= 0))
		timerStyle = 0;
	
	var trackingEnabled = System.Gadget.Settings.read("coordinate-tracking") == 1 ? true : false;
	var trackingPort = System.Gadget.Settings.read("coordinate-tracking-port");
	
	var playSound = System.Gadget.Settings.read("play-sound");
	if (playSound === "" || !(playSound >= 0))
		playSound = 0;
		
	var playSoundOffset = System.Gadget.Settings.read("play-sound-offset");
	if (playSoundOffset === "")
		playSoundOffset = 0;
		
	var soundRandomize = System.Gadget.Settings.read("playlist-mode") == 1;
		
	if (!(maximumTimers > 0))
		maximumTimers = 7;
		
	if (compactTimers === "" || !(compactTimers >= 0))
		compactTimers = 3;
		
	if (!(trackingPort > 0))
		trackingPort = 18953;
	
	document.getElementById("timer-count").value = maximumTimers;
	document.getElementById("timeline-order").value = timelineOrder;
	document.getElementById("timeline-style").value = timelineStyle;
	document.getElementById("compact-timers").value = compactTimers;
	document.getElementById("timer-style").value = timerStyle;
	
	document.getElementById("coordinate-tracking").checked = trackingEnabled;
	document.getElementById("coordinate-tracking-port").value = trackingPort;
	
	document.getElementById("play-sound").value = playSound;
	if (playSoundOffset > 0)
	{
		document.getElementById("play-sound-minutes-offset").value = playSoundOffset;
		document.getElementById("play-sound-offset").value = 1;
	}
	else
	{
		document.getElementById("play-sound-minutes-offset").value = -playSoundOffset;
		document.getElementById("play-sound-offset").value = 0;
	}
	
	document.getElementById("sound-randomize").checked = soundRandomize;
	
	try
	{
		document.getElementById("select-sound-custom").value
	}
	catch(ex)
	{
		console.error(ex.message);
	}
	
	onPlaySoundMinutesOffsetChanged();
	
	loadPlaylist();
	loadEvents();
}
function setupSounds()
{
	var soundsSelect = document.getElementById("select-sound");
	var before = null;
	
	if (soundsSelect.length > 0)
		before = soundsSelect[0];
	
	for (var file in sounds)
	{
		var o = document.createElement("option");
		o.value = file;
		o.innerHTML = sounds[file].name;
		soundsSelect.insertBefore(o, before);
	}
}
function setupTabs()
{
	document.getElementById("tab-timers").tabBody = document.getElementById("tab-timers-body");
	document.getElementById("tab-events").tabBody = document.getElementById("tab-events-body");
	document.getElementById("tab-plugins").tabBody = document.getElementById("tab-plugins-body");
	
	setTab(document.getElementById("tab-timers"));
}
function SettingsClosing(event)
{
	// Save the settings if the user clicked OK.
	if (event.closeAction == event.Action.commit)
	{
		var checks = document.getElementById("events").getElementsByTagName("input");
		
		for (var i = 0, length = checks.length; i < length; i++)
		{
			var e = checks[i];
			System.Gadget.Settings.write("event-" + e.value, e.checked);
		}
		
		var timelineOrder = parseInt(document.getElementById("timeline-order").value);
		var timelineStyle = parseInt(document.getElementById("timeline-style").value);
		var maximumTimers = Math.max(1, Math.min(99, parseInt(document.getElementById("timer-count").value)));
		var compactTimers = parseInt(document.getElementById("compact-timers").value);
		var timerStyle = parseInt(document.getElementById("timer-style").value);
		
		var trackingEnabled = document.getElementById("coordinate-tracking").checked == true ? 1 : 0;
		var trackingPort = parseInt(document.getElementById("coordinate-tracking-port").value);
	
		System.Gadget.Settings.write("timeline-order", timelineOrder);
		System.Gadget.Settings.write("timeline-style", timelineStyle);
		System.Gadget.Settings.write("timer-count", maximumTimers);
		System.Gadget.Settings.write("timer-style", timerStyle);
		System.Gadget.Settings.write("compact-timers", compactTimers);
		
		System.Gadget.Settings.write("coordinate-tracking", trackingEnabled);
		System.Gadget.Settings.write("coordinate-tracking-port", trackingPort);
		
		var playSound = parseInt(document.getElementById("play-sound").value);
		var playSoundOffset = parseInt(document.getElementById("play-sound-minutes-offset").value);
		
		if (document.getElementById("play-sound-offset").value == 0)
			playSoundOffset = -playSoundOffset;
		
		System.Gadget.Settings.write("play-sound", playSound);
		System.Gadget.Settings.write("play-sound-offset", playSoundOffset);
		System.Gadget.Settings.write("playlist-mode", document.getElementById("sound-randomize").checked ? 1 : 0);
		
		savePlaylist();
	}
	// Allow the Settings dialog to close.
	event.cancel = false;
}
function savePlaylist()
{
	var json = "[";
	var playlist = document.getElementById("sound-playlist");
	for (var i = 0, length = playlist.length; i < length; i++)
	{
		var o = playlist[i].data;
		json += "[\"" + o.path + "\"," + o.volume + (i < length - 1 ? "]," : "]");
	}
	json += "]";
	System.Gadget.Settings.write("playlist", json);
}
function loadPlaylist()
{
	var l = System.Gadget.Settings.read("playlist");
	try
	{
		l = eval("(" + l + ")");
	}
	catch (ex)
	{
		l = null;
	}
	if (!l)
		return;
	
	var playlist = document.getElementById("sound-playlist");
	for (var i = 0, length = l.length; i < length; i++)
	{
		addPlaylist(playlist, l[i][0], l[i][1]);
	}
}
function loadEvents()
{
	var e = document.getElementById("events");
	var template = e.getElementsByTagName("div")[0];
	e.removeChild(template);
	
	var events = [];
	var parent = System.Gadget.document.parentWindow || System.Gadget.window;
	
	for (var id in parent.event_data)
	{
		events.push({ id: id, name: parent.event_data[id].name });
	}
		
	events.sort(
		function(a, b)
		{
			if (a.name == b.name)
				return 0;
			return a.name < b.name ? -1 : 1;
		});
	
	for (var i = 0, length = events.length; i < length; i++)
	{
		var id = events[i].id;
		var name = events[i].name;
		
		var n = template.cloneNode(true);
		var span = n.getElementsByTagName("span")[0];
		var check = n.getElementsByTagName("input")[0];
		
		span.innerHTML = name;
		check.value = id;
		
		var v = System.Gadget.Settings.read("event-" + id);
		check.checked = (v === "" || v == true);
		
		span.check = check;
		
		span.onclick = function()
		{
			this.check.checked = !this.check.checked;
		}
		
		e.appendChild(n);
	}
}
function setTab(e)
{
	if (currentTab)
	{
		currentTab.className = "tab";
		currentTab.tabBody.style.display = "none";
	}
	
	e.className = "tab selected";
	e.tabBody.style.display = "block";
	
	currentTab = e;
}
function clickCheck(n)
{
	var e = document.getElementById(n);
	e.checked = !e.checked;
}
function showSounds()
{
	var e = document.getElementById("manage-playlist");
	e.style.display = "block";
	showCustomSound(false);
}
function hideSounds()
{
	var e = document.getElementById("manage-playlist");
	e.style.display = "none";
}
function onSoundSelected(e)
{
	if (e.value == "")
	{
		showCustomSound(true);
	}
}
function showCustomSound(visible)
{
	var basic = document.getElementById("select-sound-container"),
		custom = document.getElementById("select-sound-custom-container");
	if (visible)
	{
		basic.style.display = "none";
		custom.style.display = "block";
		
		custom = document.getElementById("select-sound-custom");
		custom.value = "c:\\example.wav";
		custom.focus();
		custom.select();
	}
	else
	{
		basic.style.display = "block";
		custom.style.display = "none";
		
		basic = document.getElementById("select-sound");
		basic.selectedIndex = 0;
	}
}
function getSelectedSoundPath()
{
	var e = document.getElementById("select-sound");
	var path = null;
	
	if (e.value == "")
		path = document.getElementById("select-sound-custom").value;
	else
		path = "sounds/" + e.value;
		
	return path;
}
function getFileName(path)
{
	var i = path.lastIndexOf("/"),
		j = path.lastIndexOf("\\");
	
	if (i < 0 && j < 0)
		return path;
	
	return path.substr(Math.max(i, j) + 1);
}
function playSound()
{
	System.Sound.playSound(getSelectedSoundPath());
}
function addSound()
{
	var path = getSelectedSoundPath();
	var playlist = document.getElementById("sound-playlist");
	addPlaylist(playlist, path, 1);
}
function addPlaylist(playlist, path, volume)
{
	var o = document.createElement("option");
	o.data = { path: path, volume: 1 }
	
	var name = getFileName(path);
	if (sounds[name] && path == "sounds/" + name)
		name = sounds[name].name;
	
	o.innerHTML = name;
	playlist.appendChild(o);
}
function removeSound()
{
	var playlist = document.getElementById("sound-playlist");
	var selected = playlist.selectedIndex;
	if (selected >= 0)
	{
		playlist.removeChild(playlist[selected]);
		if (playlist.length > 0)
			playlist.selectedIndex = Math.min(playlist.length - 1, selected);
	}
}
function clearSound()
{
	var playlist = document.getElementById("sound-playlist");
	for (var i = playlist.childNodes.length - 1; i >= 0; i--)
	{
		playlist.removeChild(playlist.childNodes[i]);
	}
}
function showFileBrowser()
{
	document.getElementById("file-browser").click();
}
function onFileBrowserChanged()
{
	try
	{
		document.getElementById("select-sound-custom").value = document.getElementById("file-browser").value;
	}
	catch(ex) { }
}
function onPlaySoundMinutesOffsetChanged()
{
	var i = parseInt(document.getElementById("play-sound-minutes-offset").value);
	var e = document.getElementById("play-sound-offset");
	
	if ((i != 1) !== e.plural)
	{
		e.plural = (i != 1)
		var m = e.plural ? "minutes" : "minute";
		
		e[0].innerHTML = m + " before";
		e[1].innerHTML = m + " after";
	}
}
function checkRandomize()
{
	var e = document.getElementById("sound-randomize");
	e.checked = !e.checked;
}
function validateNumericKeypress(event)
{
	event = event || window.event;
	var c = event.key || String.fromCharCode(event.keyCode || event.which);
	
	if (!/^[0-9]+$/.test(c))
	{
		event.preventDefault();
	}
}
</script>
</head>

<body onLoad="init()">

<div style="position: absolute: top: 0px; left: 0px; width: 100%; height: 100%; background-color: #fff;">

<div style="width: 100%; height: 30px; background-color: #000; color: #fff; position: relative;">
    <div id="tab-timers" class="tab" style="width: 65px; left: 5px;" onClick="setTab(this)">Timers</div>
    <div id="tab-events" class="tab" style="width: 65px; left: 70px;" onClick="setTab(this)">Events</div>
    <div id="tab-plugins" class="tab" style="width: 65px; left: 135px;" onClick="setTab(this)">Plugins</div>
</div>

<div id="tab-timers-body" class="tab-body">
    <div class="setting-name">Maximum timers to display</div>
    <input type="text" id="timer-count" value="" maxlength="2" style="width: 40px;" onKeyPress="validateNumericKeypress(event)" />
    
    <div class="setting-name">Timer style</div>
    <select id="timer-style" style="width: 140px;">
        <option value="0">1m 23s</option>
        <option value="1">1:23</option>
        <option value="2">12h clock</option>
        <option value="3">24h clock</option>
    </select>
    
    <div class="setting-name">Show shortest timer</div>
    <select id="timeline-order" style="width: 140px;">
        <option value="0">First</option>
        <option value="1">Last</option>
    </select>
    
    <div class="setting-name">Timeline style</div>
    <select id="timeline-style" style="width: 190px;">
        <option value="0">Show all</option>
        <option value="1">Skip events already shown</option>
    </select>
    
    <div class="setting-name">Compact timers after</div>
    <input type="text" id="compact-timers" value="" maxlength="2" style="width: 40px;" onKeyPress="validateNumericKeypress(event)" />
    
    <div class="setting-name">Play sound for active events</div>
    <select id="play-sound" style="width: 170px;">
        <option value="0">Never</option>
        <option value="1">Always</option>
        <option value="2">If not already marked</option>
    </select>
    <div class="setting-text">
    	<input type="text" id="play-sound-minutes-offset" value="" on maxlength="1" style="width: 20px;" onKeyPress="validateNumericKeypress(event)" onKeyUp="onPlaySoundMinutesOffsetChanged()" />
        <select id="play-sound-offset" style="width: 120px;">
            <option value="0">minutes before</option>
            <option value="1">minutes after</option>
        </select>
        <div style="padding-top: 4px;"><a href="javascript:void(0)" onclick="showSounds()">Manage sounds</a></div>
    </div>
</div>

<div id="manage-playlist">
    <div class="content">
		<div class="close" onclick="hideSounds()"></div>
        <div style="margin-left: 5px; margin-top: 3px;">
        
            <div id="select-sound-container" style="margin-bottom: 2px;">
                <div class="setting-name">Choose a sound</div>
                <select id="select-sound" style="width: 140px;" onchange="onSoundSelected(this)">
                	<option value="">Custom</option>
                </select>
            </div>
               
            <div id="select-sound-custom-container" style="display: none;">
                <div class="setting-name">
                    Path to sound file
                    <a href="javascript:void(0)" onclick="showCustomSound(false)" style="margin-left: 2px; font-weight: normal;">back</a>
                </div>
                <input type="file" id="file-browser" style="display: none" accept="audio/wav" onChange="onFileBrowserChanged()" />
                <input type="text" id="select-sound-custom" value="" maxlength="255" style="width: 140px;" />
                <a href="javascript:void(0)" onclick="showFileBrowser()" style="margin-left: 2px;">browse</a>
            </div>
            
            <div style="padding-top: 5px;">
            	<a href="javascript:void(0)" onclick="playSound()">Play sound</a>
                <a href="javascript:void(0)" onclick="addSound()" style="margin-left: 10px;">Add to playlist</a>
            </div>
            
	    	<div class="setting-name">Playlist</div>
            <select id="sound-playlist" size="4" style="width: 160px;">
            </select>
            <div style="width: 140px; padding-top: 5px;">
            	<a href="javascript:void(0)" onclick="clearSound()">Clear</a>
                <a href="javascript:void(0)" onclick="removeSound()" style="margin-left: 10px;">Remove selected</a>
            </div>
            
	    	<div class="setting-name" style="padding-bottom: 0px;">Playlist mode</div>
            <input id="sound-randomize" type="checkbox" style="position: relative; top: 2px" /> <span onclick="checkRandomize()">Randomize</span>
        </div>
    </div>
    <div class="darken" onclick="hideSounds()"></div>
</div>

<div id="tab-events-body" class="tab-body">
    <div class="setting-name">Events</div>
    <div id="events">
        <div style="padding-top: 2px;"><input type="checkbox" style="position: relative; top: 2px" /> <span></span></div>
    </div>
</div>

<div id="tab-plugins-body" class="tab-body">
    <div class="setting-name" style="font-size: 14px; font-weight: normal;">Coordinate tracking</div>
    <div style="margin-left: 5px;">
        <div style="padding-bottom: 5px;">Automatically mark events as complete when you are detected within an active event area.</div>
        <div style="padding-bottom: 5px;">Requires <a href="https://code.google.com/p/gw2-dragontimer-gadget/wiki/Gw2MumbleLinkServer" target="_blank">Gw2MumbleLinkServer</a></div>
        
        <div style="position: relative; left: -4px;"><input type="checkbox" id="coordinate-tracking" style="position: relative; top: 2px;" /> <span onClick="clickCheck('coordinate-tracking')">Enable</span></div>
        <div class="setting-name">Port</div>
        <input type="text" id="coordinate-tracking-port" value="" maxlength="5" style="width: 60px;" onKeyPress="validateNumericKeypress(event)" />
    </div>
</div>

</div>

</body>
</html>